// 物流配置 物流服务方式
<template>
  <div>
    <div class="service">
      <a-button type="primary" @click="addProviders">新增物流服务方式</a-button>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table :data-source="providersData" :pagination="false">
        <a-table-column
          key="wayName"
          data-index="wayName"
          align="center"
          width="15%"
        >
          <span slot="title">物流服务名称</span>
          <template slot-scope="text, record">
            {{ record.wayName }}
          </template>
        </a-table-column>

        <a-table-column
          key="createTime"
          data-index="createTime"
          align="center"
          width="15%"
        >
          <span slot="title">创建时间</span>
          <template slot-scope="text, record">
            {{ record.createTime }}
          </template>
        </a-table-column>
        <a-table-column
          key="updateTime"
          data-index="updateTime"
          align="center"
          width="15%"
        >
          <span slot="title">更新时间</span>
          <template slot-scope="text, record">
            {{ record.updateTime }}
          </template>
        </a-table-column>
        <a-table-column
          key="remarks"
          data-index="remarks"
          align="center"
          width="15%"
        >
          <span slot="title">备注</span>
          <template slot-scope="text, record">
            {{ record.remarks }}
          </template>
        </a-table-column>
        <a-table-column
          key="action"
          data-index="action"
          align="center"
          width="15%"
        >
          <span slot="title">操作</span>
          <template slot-scope="text, record">
            <a
              slot="action"
              href="javascript:;"
              style="color: #0000ff; border-bottom: 1px solid #0000ff"
              @click="editProviders(record)"
              >固定信封</a
            >
            <a-divider type="vertical" />
            <a
              slot="action"
              href="javascript:;"
              style="color: #0000ff; border-bottom: 1px solid #0000ff"
              @click="constomQuo(record)"
              >自定义报价</a
            >
            <a-divider type="vertical" />
            <a
              slot="action"
              href="javascript:;"
              style="color: #0000ff; border-bottom: 1px solid #0000ff"
              @click="addservice(record)"
              >额外规则</a
            >
          </template>
        </a-table-column>
      </a-table>
      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              (props) =>
                ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :default-current="searchData.current"
            :total="total"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
    </a-spin>
    <a-modal v-model="provider" title="新增物流服务方式">
      <template slot="footer" class="modelBtn">
        <a-button
          @click="cancel1"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >
        <a-button :loading="loading" type="primary" @click="handleOk('addser')"
          >确认</a-button
        >
      </template>
      <div style="padding: 24px; padding-bottom: 5px">
        <a-form-model
          class="fromData"
          ref="addSerRules"
          :model="addserForm"
          :rules="addSerRules"
        >
          <a-form-model-item label="服务名称" prop="wayName">
            <a-input
              style="width: 200px"
              v-model.trim="addserForm.wayName"
              :maxLength="120"
            />
          </a-form-model-item>
          <!-- <a-form-model-item label="是否启用">
            <div>
              <a-switch
                :checked="addserForm.isDisable == '0'"
                @change="onChangeservice"
              />
            </div>
          </a-form-model-item> -->
          <a-form-model-item label="备注">
            <a-input
              v-model="addserForm.remarks"
              type="textarea"
              :maxLength="25"
            />
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>
    <!-- 自定义报价组件 -->
    <ConstomQuo />

    <a-modal v-model="addruleViseble" title="额外规则">
      <template slot="footer" class="modelBtn">
        <a-button
          @click="cancel3"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >
        <a-button :loading="loading" type="primary" @click="handleOk('addser')"
          >确认</a-button
        >
      </template>
    </a-modal>
  </div>
</template>

<script>
import ConstomQuo from "./ConstomQuo";
import {
  service_List,
  pro_searchOneInfo,
  pro_saveSerinfo,
  pro_editSerInfo,
} from "@/apis/system/setManage/setLogistics";

export default {
  components: {
    ConstomQuo,
  },
  data() {
    let serveceName = async (rule, value, callback) => {
      if (!value) {
        callback(new Error("请填写服务名称！"));
      }
      this.providersData.forEach((item) => {
        if (value == item.wayName) {
          callback("该服务方式名称已被使用，请修改！");
        }
      });
      callback();
    };
    return {
      addSerRules: {
        wayName: [{ validator: serveceName, required: true, trigger: "blur" }],
      },

      serviceTit: "添加启用服务方式",
      provider: false,
      addruleViseble: false,
      //物流商表格数据
      providersData: [],
      spinning: false,
      loading: false,
      total: 5,
      searchData: {
        size: 10,
        current: 1,
      },
      addserForm: {
        wayName: "",
        isDisable: 1,
      },
      handleFlag: "add",
    };
  },
  created() {
    this.getTabList();
  },
  methods: {
    //关闭新增物流商
    cancel1() {
      this.$refs.addSerRules.resetFields();
      this.provider = false;
      setTimeout(() => {
        this.addserForm = {
          wayName: "",
          isDisable: 1,
        };
      }, 50);
    },
    cancel3() {},
    constomQuo(record) {
      this.$bus.$emit("addCustom", record);
    },
    //及时修改物流服务的方法
    async changeListEnable(e, record) {
      if (e.target.checked) {
        record.isEnable = "0";
        let res = await pro_editSerInfo(
          record.sysLogisticsServiceItemId,
          record.sysLogisticsServiceWayId,
          record.revision,
          0
        );
        if (res.code == "10000") {
          this.getTabList();
        }
      } else {
        record.isEnable = "1";
        let res = await pro_editSerInfo(
          record.sysLogisticsServiceItemId,
          record.sysLogisticsServiceWayId,
          record.revision,
          1
        );
        if (res.code == "10000") {
          this.getTabList();
        }
      }
    },
    //新增物流商按钮
    addProviders() {
      this.addserForm = {
        wayName: "",
        isDisable: 1,
      };
      this.provider = true;
    },
    //编辑每一行信息
    async editProviders(record) {
      let res = await pro_searchOneInfo(record.sysLogisticsServiceItemId);
      if (res.code == "200") {
        this.handleFlag = "edit";
        this.addserForm = res.responseBody;
        this.provider = true;
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber * 1;
      this.getTabList();
    },
    //页码变更
    showChange(current, size) {
      this.searchData.current = current * 1;
      this.searchData.size = size * 1;
      this.getTabList();
    },

    //新增物流服务
    handleOk(flag) {
      this.loading = true;
      if (flag == "addser") {
        this.$refs.addSerRules.validate(async (valid) => {
          if (valid) {
            let res = await pro_saveSerinfo(this.addserForm);
            if (res.code == "10000") {
              this.loading = false;
              this.addserForm = {};
              this.getTabList();
              this.cancel1();
            }
          } else {
            this.loading = false;
            return false;
          }
        });
      }
    },
    async getTabList() {
      this.spinning = true;
      let res = await service_List(this.searchData);
      if (res.code == "200") {
        this.total = res.responseBody.total * 1;
        this.searchData.size = res.responseBody.size * 1;
        this.providersData = res.responseBody.records;
        this.spinning = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.service {
  margin: 10px 0;
}
/deep/.fromData {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .ant-form-item {
    display: flex;
    width: 100%;
    .ant-form-item-label {
      width: 100px !important;
      text-align: right;
    }
    .ant-form-item-control-wrapper {
      width: 100%;
      .ant-form-item-children {
        display: flex;
        width: 100%;
        .ant-checkbox-wrapper {
          flex: 1;
        }
      }
    }
  }
}
/deep/.ant-modal-footer {
  display: flex;
  justify-content: center;
  .ant-btn {
    margin-right: 10px;
  }
}
</style>
